﻿@(Layout = null)
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>

    <partial name="_ElementUiStylesPartial" />
    <partial name="_AvueStylesPartial" />
    <partial name="_AnimateCssStylesPartial" />
    <partial name="_SiteStylesPartial" />
</head>
<body>
    <div id="vue-app">
        <el-container>
            <el-main>
                <el-row>
                    <el-col>
                        <avue-crud :data="crud.data"
                                   :option="crud.option"
                                   v-model="crud.form"
                                   @@row-save="onAdd"
                                   @@row-update="onUpdate">
                        </avue-crud>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <partial name="_LinqJsScriptsPartial" />
    <partial name="_JQueryScriptsPartial" />
    <partial name="_VueSubmitFormHelperWithAxiosAndQsScriptsPartial" />
    <partial name="_ElementUiScriptsPartial" />
    <partial name="_AvueScriptsPartial" />

    <script>
        var vueApp = new Vue({
            el: '#vue-app',
            created: function () {
                var _this = this;

                axios.get('/Manage/AuthorizationRules/List')
                    .then(function (response) {
                        _this.menu.data.length = 0;
                        _this.menu.data.push(response.data);
                    }).catch(function (error) {
                        console.error(error);
                    });
            },
            data: function () {
                return {
                    crud: {
                        form: {},
                        option: {
                            title: '授权规则',
                            page: false,
                            align: 'center',
                            menuAlign: 'center',
                            column: [
                                {
                                    label: '名称',
                                    prop: 'name',
                                    rules: [
                                        {
                                            required: true,
                                            message: "请输入名称",
                                            trigger: "blur"
                                        }
                                    ]
                                }
                            ]
                        },
                        data: []
                    }
                };
            },
            methods: {
                onAdd: function (form, done) {
                    done();
                },
                onUpdate: function (form, index, done) {
                    var data = this.menuItems.data;
                    var submitFormHelper = this.$submitFormHelper;
                    submitFormHelper.submitForm('/Manage/Menu/UpdateMenuItem', 'post', form)
                        .then(function(response) {
                            Vue.set(data, index, response.data);
                            done();
                        })
                        .catch(function(error) {
                            console.error(error);
                        });
                }
            }
        });
    </script>
</body>
</html>
